<!DOCTYPE html>
<html>
<head>
	<meta name="renderer" content="webkit" />
	<meta http-equiv="X-UA-COMPATIBLE" content="IE=edge,chrome=1" />
	<title>安装程序 - Bwsaas多租户多应用多终端SAAS平台快速开发框架</title>
	<link rel="stylesheet" type="text/css" href="{$INSTALL_CSS}/style.css" />
	<link rel="stylesheet" href="__MODULE__/lib/layui-v2.5.5/css/layui.css" media="all">
	<script src="__STATIC__/plugs/layui-v2.5.6/layui.all.js" charset="utf-8"></script>
	<script>
        var $;
        layui.use(['layer', 'upload', 'element','jquery'], function() {
            $ = layui.$ //重点处

        });
	</script>
	{block name="resources"}{/block}
</head>

<body>
<div class="head-block">
	<div class="top">
		<div class="top-logo"></div>
		<div class="top-sub" style="flex:1;">Bwsaas多租户多应用多终端SAAS平台快速开发框架</div>
		<ul class="top-link">
			<li style="padding: 0 8px;background:#FF4D4D;border-radius: 4px;"><a href="http://www.buwangyun.com" target="_blank" style="color:#fff;height: 32px;line-height: 32px;text-align: center;">官方网站</a></li>
		</ul>
	</div>
</div>
<div class="step-content">
	<div style="width:1000px;margin:0 auto;">

		<!--  标题进度条 start-->
		<div class="content" style="margin:30px 0 0 0;width: 100%;">
			<div class="processBar">
				<div class="text" style="margin: 10px -25px;"><span class='poetry'>1.许可协议</span></div>
				<div id="line0" class="bar">
					<div id="point0" class="c-step c-select"></div>
				</div>

			</div>
			<div class="processBar">
				<div class="text" style="margin: 10px -30px;"><span class='poetry'>2.环境检测</span></div>
				<div id="line1" class="bar">
					<div id="point1" class="c-step"></div>
				</div>

			</div>
			<div class="processBar">
				<div class="text" style="margin: 10px -30px;"><span class='poetry'>3.参数配置</span></div>
				<div id="line2" class="bar">
					<div id="point2" class="c-step"></div>
				</div>
			</div>
			<div class="processBar" style="width:10px;">
				<div class="text" style="margin: 10px -39px;"><span class='poetry'>4.安装完成</span></div>
				<div id="line3" class="bar" style="width: 0;">
					<div id="point3" class="c-step"></div>
				</div>
			</div>
		</div>
		<!--  标题进度条 end-->
		<div style="clear: both;"></div>
	</div>
</div>
<div class="install-content">

	{block name='main'}
	{/block}
</div>

<script>
    var index=0;
    $(document).ready(function(){
        $("#education").addClass('main-hide');
        $("#work").addClass('main-hide');
        $("#social").addClass('main-hide');
        $('#previous_step').hide();

        /*上一步*/
        $('#previous_step').bind('click', function () {
            index--;
            ControlContent(index);
        });
        /*下一步*/
        $('#next_step').bind('click', function () {
            index++;
            ControlContent(index);
        });

    });

    function ControlContent(index) {
        var stepContents = ["basicInfo","education","work","social"];
        var key;//数组中元素的索引值
        for (key in stepContents) {
            var stepContent = stepContents[key];//获得元素的值
            if (key == index) {
                if(stepContent=='basicInfo'){
                    $('#previous_step').hide();
                }else{
                    $('#previous_step').show();
                }
                if(stepContent=='social'){
                    $('#next_step').hide();
                }else{
                    $('#next_step').show();
                }
                $('#'+stepContent).removeClass('main-hide');
                $('#point'+key).addClass('c-select');
                $('#line'+key).removeClass('b-select');
            }else {
                $('#'+stepContent).addClass('main-hide');
                if(key>index){
                    $('#point'+key).removeClass('c-select');
                    $('#line'+key).removeClass('b-select');
                }else if(key<index){
                    $('#point'+key).addClass('c-select');
                    $('#line'+key).addClass('b-select');
                }
            }
        }

    }

    function success(message){
        layer.alert(message, {
            icon: 1,
            skin: 'layer-ext-moon',
            title:'成功'
        })
    }
    function error(message){
        layer.alert(message, {
            icon: 2,
            skin: 'layer-ext-moon',
            title:'错误'
        })
    }
</script>
{block name="script"}
{/block}

</body>
</html>